---
comments: false
---

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>字帖</title>
  <script src="leancloud.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jsencrypt/3.0.0/jsencrypt.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/leancloud-storage/dist/av-min.js"></script>
  <link rel="stylesheet" href="loading.css">
  <link rel="stylesheet" href="leancloud.css">
  <script src="js/shufaDictJS.js"></script>
  <link rel="stylesheet" href="css/shufaDictCSS.css">
  <style>
    html,
    body {
      margin: 0;
      padding: 0;
    }

    #container {
      display: flex;
      flex-wrap: wrap;
      justify-content: flex-start;
      padding-top: 10px;
      align-items: flex-start;
      align-content: flex-start;
    }

    .card img {
      border-radius: 10px;
      overflow: hidden;
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
      transition: transform 0.5s;
      z-index: 1;
    }

    .card {
      border-radius: 5px;
      width: 20%;
      height: 20%;
      padding: 5px;
      overflow: hidden;
      transition: transform 0.5s;
      position: relative;
    }

    .text {
      /* width: 100%; 
            height: 100%; */
      position: absolute;
      z-index: 2;
      padding: 3px;
      padding-left: 5px;
      padding-right: 5px;
      border-radius: 3px;
      /* top: 50%; */
      background-color: var(--main-color);
      display: none;
      transition: transform 0.5s;
    }

    .name {
      font-size: 10px;
      color: lightgray;
    }

    .author {
      font-size: 10px;
      color: lightgray;
    }

    img:hover {
      transform: scale(1.1);
      cursor: pointer;
    }

    .card:hover .text {
      display: block;
    }

    .item1 {
      /* 或任何你想要的百分比 */
      margin-bottom: -20px;
      margin-right: 15px;
    }

    .item2 {
      flex-grow: 1;
      /* 这将占据剩余的所有空间 */
    }

    #containers {
      display: flex;
      align-items: center;
      /* 垂直居中对齐 */
    }

    #buttonContainer {
      justify-content: center;
      align-items: center;
      display: flex;
    }

    #backButton {
      background-image: url('images/back.png');
      width: 20px;
      height: 20px;
      background-size: cover;
      cursor: pointer;
      /* background-color: #666; */
    }

    #footer {
      text-align: right;
      color: lightgray;
      font-size: 10px;
    }

    .search-button {
      margin-left: 10px;
      padding: 0 15px;
      /* height: 40px; */
      /* line-height: 40px; */
      /* 设置行高与高度相同 */
      background-color: #007bff;
      color: white;
      border: none;
      border-radius: 5px;
      cursor: pointer;
      text-align: center;
      /* 确保文本水平居中 */
      font-size: 13px;
      /* 设置字体大小，您可以根据需要调整 */
    }
  </style>
</head>

<body>

  <div id="containers">
    <div id="backButton" class="item1"></div>
    <div id="search" class="item2">

      <form class="search-form" action="javascript:return true" autocomplete="off" onsubmit="return false;">
        <div class="search-input">

          <input maxlength="80" type="search" class="search-input" id="search-input" placeholder="请输入关键字..."
            required="">

        </div>
        <button class="search-button">搜索</button>
      </form>
    </div>
  </div>

  <!-- 加载动画 -->
  <div class="loading">
    <div></div>
    <div></div>
    <div></div>
  </div>

  <div id="container"></div>

  <div id="buttonContainer">
    <div id="moreButton"></div>

  </div>
  <script>
    hiddenEle()

    var headeRight = document.querySelector('.header__right');
    headeRight.style.display = 'none';

    var headeLeft = document.querySelector('.header__left');
    headeLeft.style.display = 'none';

    function isWeChat() {
      var ua = window.navigator.userAgent.toLowerCase();
      return ua.indexOf('micromessenger') !== -1;
    }
    if (!isWeChat()) {
      alert('请关注公众号“临帖宝”，使用“田楷字典”！');
      window.opener = null;
      window.close();
      setTimeout(function () {
        window.history.back();
      }, 100);
    }
    // localStorage.removeItem('searchDictKeyword', "");
    var elements = document.querySelector('.post-title__text');
    elements.textContent = localStorage.getItem('dictMore_name');

    var currentPage = 1;
    var pageSize = 10;
    var key = ""
    var inputValue = ""
    initLeanCloud()
    requestKey(handleData2)



    var img = document.getElementById('moreButton');
    img.addEventListener('click', function () {
      currentPage++;
      var keyword = localStorage.getItem('searchDictKeyword');
      if (keyword == null) {
        keyword = ""
      }
      // console.log('keyword:',keyword);
      requestZidianDict(currentPage, pageSize, keyword, handleData)
    });
    function handleData2(data) {
      data.forEach(function (object) {
        key = object.get('name')
        var keyword = ""
        if (sessionStorage.getItem('returnedFromDetail') === 'true') {
          keyword = localStorage.getItem('searchDictKeyword');
          if (keyword == null) {
            keyword = ""
          }
          const inputDiv = document.getElementById('search-input');
          inputDiv.value = keyword;
          sessionStorage.removeItem('returnedFromDetail');
        } else {
          localStorage.removeItem('searchDictKeyword', "");
        }
        requestZidianDict(currentPage, pageSize, keyword, handleData)
      })
    }
    const encrypt = new JSEncrypt();

    function handleData(data) {
      var loading = document.querySelector('.loading');
      loading.style.display = 'none'; // 隐藏loading动画
      // data.style.opacity = 0.8; // 显示数据
    }

    // 获取按钮元素
    const searchButton = document.querySelector('.search-button');

    // 添加点击事件监听器
    searchButton.addEventListener('click', function () {
      handleSearch()
    });
    function handleSearch() {
      localStorage.setItem('searchDictKeyword', inputValue);
      cleanDict()
      // 清空容器
      requestZidianDict(currentPage, pageSize, inputValue, handleData);
    }
    // 监听搜索输入框
    document.addEventListener('DOMContentLoaded', function () {
      var inputElement = document.getElementById('search-input');
      inputElement.value = '';
      inputElement.addEventListener('input', function (event) {
        // 实时获取输入框中的内容
        inputValue = inputElement.value;
        // console.log('输入内容为: ' + inputValue);
      });
      inputElement.addEventListener('keyup', function (event) {
        if (event.key === 'Enter') {
          // 用户按下了回车键，执行相应的操作
          // console.log('用户按下了回车键');
          inputValue = inputElement.value;

          handleSearch()
        }
      });
    });
    var img = document.getElementById('backButton');
    img.addEventListener('click', function () {
      window.history.back()
    });
  </script>
</body>

</html>